<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>
		前端下载表格
	</title>
	<link href="https://cdn.bootcss.com/element-ui/2.13.1/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
	<button onclick="download()">下载表格数据</button>
	<div id='app'>
		<button @click='down'>下载</button>
		<el-table
		:data='arr'
		ref='table'
		id='table '
		align='center'
		>
		<el-table-column prop='' label='昆明市公安局刑事案件监督领域概况分析报表' align='center' >
			<el-table-column prop='' label='统计日期:(2020-04-01 至 2020-04-31)' align='center'>
				<el-table-column prop='index'  align='center'label='序号'></el-table-column>
				<el-table-column prop='dwmc' label='单位名称'></el-table-column>
				<el-table-column prop='' label='刑事案件情况' align='center'>
					<el-table-column prop='ajs' label='案件数' align='center'></el-table-column>
					<el-table-column prop='xyrs' label='嫌疑人数目' align='center'></el-table-column>
				</el-table-column>
				<el-table-column prop='' label='强制措施人数' align='center'>
					<el-table-column  label='拘留情况'>
						<el-table-column prop='jlrs' label='拘留人数' align='center'></el-table-column>
						<el-table-column prop='wrs' label='未入所' align='center'></el-table-column>
					</el-table-column>
					<el-table-column prop='jcrs' label='拘传人数' align='center'></el-table-column>
				</el-table-column>
			</el-table-column>
		</el-table-column>
	</el-table>
</div>
</body> 
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.1/index.js"></script>
<script type="text/javascript" src="./xlsx.core.min.js"></script>

<script type="text/javascript">



	let tableData = [
	{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	},{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	},{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	},{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	},{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	},{
		name:"测试",
		age:18,
		sex:'男',
		id:0
	}
	]
	let header = {
		title:['姓名','数字','年龄','编号','性别',],
		key:['name',null,'age','id','sex',],
		data:tableData,
		autoWidth:true,
		filename:'测试'
	};


	const auto_width =(ws, data)=> {
		console.log(ws,data)
		/*set worksheet max width per col*/
		const colWidth = data.map(row => row.map(val => {
			/*if null/undefined*/
			if (val == null) {
				return {'wch': 10};
			}
			/*if chinese*/
			else if (val.toString().charCodeAt(0) > 255) {
				return {'wch': val.toString().length * 2};
			} else {
				return {'wch': val.toString().length};
			}
		}))
		/*start in the first row*/
		let result = colWidth[0];
		for (let i = 1; i < colWidth.length; i++) {
			for (let j = 0; j < colWidth[i].length; j++) {
				if (result[j]['wch'] < colWidth[i][j]['wch']) {
					result[j]['wch'] = colWidth[i][j]['wch'];
				}
			}
		}
		ws['!cols'] = result;
	};
	const json_to_array = (key, jsonData) => {
		return jsonData.map(v => key.map(j => {

			return v[j]
		}));
	}

	const export_array_to_excel = ({key, data, title, filename, autoWidth})=> {
		const wb = XLSX.utils.book_new();
		const arr = json_to_array(key, data);
		arr.unshift(title);//设置表头
		const ws = XLSX.utils.aoa_to_sheet(arr);
		if (autoWidth) {
			auto_width(ws, arr);
		};
		
		return false
		XLSX.utils.book_append_sheet(wb, ws, filename);
		XLSX.writeFile(wb, filename + '.xlsx');
	}


	const download = () =>{
		export_array_to_excel(header);
	}
</script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			arr:[
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			{
				index:1,
				dwmc:'昆明市公安',
				ajs:1324,
				xyrs:65,
				jlrs:654,
				wrs:7876,
				jcrs:4634
			},
			],
		},
		methods:{
			down(){
				let table = document.getElementById('table')
				var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet JS"});
				XLSX.write(wb, { bookSST:true, type: 'base64'}) ;
				XLSX.writeFile(wb, test.xlsx);
			}
		}
	})
</script>
</html>